<template>
  <div>
    {{ message }}
    <van-button type="primary" @click="changeMessage">修改</van-button>
    <van-button type="primary" @click="go">跳转</van-button>
  </div>
</template>

<script>
import {
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted,
  onRenderTracked,
  onRenderTriggered,
  ref,
  getCurrentInstance
} from 'vue';
export default {
  name: "temp",
  setup() {
    const { ctx } = getCurrentInstance();

    let message = ref("你好");

    const changeMessage = () => {
      message.value = "hello";
    }

    onBeforeMount(() => {
      console.log("挂载前");
    })
    onMounted(() => {
      console.log("挂载");
    })
    onBeforeUpdate(() => {
      console.log("更新前");
    })
    onUpdated(() => {
      console.log("更新");
    })
    onBeforeUnmount(() => {
      console.log("销毁前");
    })
    onUnmounted(() => {
      console.log("销毁");
    })

    onRenderTracked(() => {
      console.log("onRenderTracked");
    })

    onRenderTriggered(() => {
      console.log("onRenderTriggered");
    })

    const go = () => {
      ctx.$router.push({
        path: "/cart"
      })
    }

    return {
      message,
      changeMessage,
      go
    }
  }
}
</script>